import React, { ReactElement, useContext, useMemo } from 'react';
import { View, Text } from 'react-native';

import styles from './style';
import Button from '../../../../components/Button';
import { Store } from '../../reducer';
import {
  selectDownloadAll,
  unSelectDownloadAll,
  deleteDownloadAlert,
  judgeIsShowSelectAllButton
} from '../../actions';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { isEdit, capacity } = state;
  const { totalCapacity, freeCapacity } = capacity;

  if (isEdit)
    return (
      <View style={styles.container}>
        <Button
          style={styles.selectedAll}
          text={judgeIsShowSelectAllButton() ? '全选' : '取消'}
          textStyle={styles.selectedAllDesc}
          onPress={
            judgeIsShowSelectAllButton()
              ? selectDownloadAll
              : unSelectDownloadAll
          }
        />
        <Button
          style={styles.delete}
          text="删除"
          textStyle={styles.deleteDesc}
          onPress={deleteDownloadAlert}
        />
      </View>
    );
  return (
    <View style={styles.loadDesc}>
      <Text style={styles.desc}>
        手机存储：总空间 {totalCapacity} / 剩余 {freeCapacity}
      </Text>
    </View>
  );
};
